<template>
  <div class="docs-home">
    <!-- 页面头部 -->
    <div class="hero-section">
      <h1 class="hero-title">文档中心</h1>
      <p class="hero-subtitle">
        探索技术文档，学习最新的开发工具和编程技巧
      </p>
      
      <!-- 快速搜索 -->
      <div class="quick-search">
        <el-input
          v-model="searchQuery"
          placeholder="搜索文档..."
          size="large"
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
          <template #append>
            <el-button @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
      </div>
    </div>
    
    <!-- 文档源列表 -->
    <div class="doc-sources">
      <h2>文档集合</h2>
      <div class="source-grid">
        <div
          v-for="(source, key) in docSources"
          :key="key"
          class="source-card"
          @click="goToSource(key)"
        >
          <div class="source-icon">
            <el-icon :size="40">
              <Document />
            </el-icon>
          </div>
          <h3>{{ source.name }}</h3>
          <p>{{ source.description || '点击查看详细文档' }}</p>
          <div class="source-meta">
            <span v-if="source.version">版本: {{ source.version }}</span>
            <span v-if="source.language">语言: {{ source.language }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 最新文档 -->
    <div v-if="recentDocs.length" class="recent-docs">
      <h2>最新更新</h2>
      <div class="doc-list">
        <div
          v-for="doc in recentDocs"
          :key="doc.id"
          class="doc-item"
          @click="goToDoc(doc)"
        >
          <h4>{{ doc.title }}</h4>
          <p>{{ doc.excerpt }}</p>
          <div class="doc-meta">
            <span>{{ formatDate(doc.updatedAt) }}</span>
            <el-tag v-if="doc.difficulty" size="small">
              {{ getDifficultyText(doc.difficulty) }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 热门标签 -->
    <div v-if="popularTags.length" class="popular-tags">
      <h2>热门标签</h2>
      <div class="tag-cloud">
        <el-tag
          v-for="tag in popularTags"
          :key="tag.id"
          :size="getTagSize(tag.usageCount)"
          @click="searchByTag(tag)"
          class="tag-item"
        >
          {{ tag.name }} ({{ tag.usageCount }})
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Document } from '@element-plus/icons-vue'
import { useDocsStore } from '@/stores/docs'
import type { DocLesson, DocTag } from '@/types/docs'

const router = useRouter()
const docsStore = useDocsStore()

// 状态
const searchQuery = ref('')
const recentDocs = ref<DocLesson[]>([])
const popularTags = ref<DocTag[]>([])

// 获取文档源
const docSources = computed(() => ({
  cursor: {
    name: 'Cursor 官方文档',
    description: 'Cursor AI 编辑器完整使用指南和技巧',
    version: '1.0',
    language: '中文'
  }
  // 可以添加更多文档源
}))

// 方法
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({
      name: 'docs-search',
      query: { q: searchQuery.value }
    })
  }
}

const goToSource = (source: string) => {
  router.push(`/docs/category/cursor-docs`)
}

const goToDoc = (doc: DocLesson) => {
  router.push(`/docs/lesson/${doc.slug || doc.id}`)
}

const searchByTag = (tag: DocTag) => {
  router.push({
    name: 'docs-search',
    query: { tag: tag.slug }
  })
}

const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const getDifficultyText = (difficulty: string) => {
  const map: Record<string, string> = {
    beginner: '入门',
    intermediate: '进阶',
    advanced: '高级'
  }
  return map[difficulty] || difficulty
}

const getTagSize = (count?: number) => {
  if (!count) return 'small'
  if (count > 10) return 'large'
  if (count > 5) return 'default'
  return 'small'
}

// 加载数据
const loadData = async () => {
  try {
    // 获取最新文档
    const result = await docsStore.fetchDocLessons({
      limit: 6,
      sortBy: 'date'
    })
    recentDocs.value = result?.data || []
    
    // 获取热门标签
    await docsStore.fetchDocTags()
    popularTags.value = docsStore.tags
      .sort((a, b) => (b.usageCount || 0) - (a.usageCount || 0))
      .slice(0, 20)
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.docs-home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.hero-section {
  text-align: center;
  padding: 3rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  color: white;
  margin-bottom: 3rem;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.quick-search {
  max-width: 600px;
  margin: 0 auto;
  
  .el-input {
    :deep(.el-input__wrapper) {
      background-color: rgba(255, 255, 255, 0.9);
    }
  }
}

.doc-sources {
  margin-bottom: 3rem;
  
  h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.source-card {
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 0.5rem;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  
  &:hover {
    border-color: var(--el-color-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  .source-icon {
    color: var(--el-color-primary);
    margin-bottom: 1rem;
  }
  
  h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  
  p {
    color: var(--el-text-color-secondary);
    margin-bottom: 1rem;
  }
  
  .source-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--el-text-color-secondary);
  }
}

.recent-docs {
  margin-bottom: 3rem;
  
  h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }
}

.doc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.doc-item {
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 0.5rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    border-color: var(--el-color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--el-text-color-primary);
  }
  
  p {
    color: var(--el-text-color-regular);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .doc-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--el-text-color-secondary);
  }
}

.popular-tags {
  h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  
  .tag-item {
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      transform: scale(1.1);
    }
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .source-grid,
  .doc-list {
    grid-template-columns: 1fr;
  }
}
</style> 